Vue.component("myhead",{
    template:`
      <div class="top">
        <div class="top_left">
            <div class="top_left_image"></div>
            <div class="top_left_type">
                <span class="box_left_bottom_time">{{this.time.year+"/"+this.time.month+"/"+this.time.day
                +"/ " +this.time.currentTime}}</span>
            </div>
        </div>
        <div class="top_right">
            <div class="top_right_search">
                <div style="margin-top: 15px;">
                    <el-input placeholder="请输入内容" v-model="Article.title" class="input-with-select" style="width: 300px;margin-top: 15px">
                        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                    </el-input>
                </div>
            </div>
            
              
               <span v-if="userinfo" style="font-size: 18px">
                <el-link target="_blank" style="margin-right:20px;margin-top:-30px;font-size: 18px;font-weight: bold">欢迎：{{userinfo.uname}}</el-link>
                    <el-popover 
                    placement="top-start"
                    width="200"
                    trigger="hover">
                        <el-button @click="aaa"  style="margin-left: 50px;margin-top: 10px">修改信息</el-button>
                        <el-button @click="fingerPwdDialogVisible=true"   style="margin-left: 50px;margin-top: 10px">修改密码</el-button>
                        <el-button  style="margin-left: 50px;margin-top: 10px" >
                        <el-link href="userinfo.html">个人中心</el-link></el-button>
                        <el-button  style="margin-left: 50px;margin-top: 10px" >
                        <el-link href=art.html >发布blog</el-link></el-button>
                        <el-button  style="margin-left: 50px;margin-top: 10px" @click="logout">退出登录</el-button>
                     <el-avatar style="margin-top: 20px" :size="50" :src="userinfo.photo" slot="reference" slot="reference"></el-avatar>
                  </el-popover>    
                </span>
                
                <span v-else style="display: inline-block;width: 330px;height: 100%;line-height: 83px" style="font-size: 18px">
                   <a style="font-size: 18px" href="login.html" style="margin-top: 20px">登录</a>&ensp;
                   <a href="reg.html">注册</a>&ensp;
                   <a href="javascript:void(0)" @click="dialogVisible = true">忘记密码</a>
                </span>
              
            </div>
            <!--修改个人信息的弹框-->
          <el-dialog
                        title="提示"
                        :visible.sync="centerDialogVisible"
                        width="60%"
                        center>
              <div v-if="userinfo">
                姓名：<el-input v-model="userinfo.uname"></el-input>
                <span v-html="error.uname" style="color: red"></span>
                邮箱：<el-input v-model="userinfo.email"></el-input>
                <span v-html="error.email" style="color: red"></span>
                电话号码：<el-input v-model="userinfo.phone"></el-input>
                <span v-html="error.phone" style="color: red"></span>
                个人简介：<el-input v-model="userinfo.descript"></el-input>
                头像：
                <el-upload
                    action="other/common/upload"
                    :on-success="handleSuccess"
                    :on-error="handleError">
                  <el-button size="small" type="primary">选择文件</el-button>
                </el-upload><br>
                <img style="width: 200px;height: 200px" :src="fileList.url"><br>
              </div>
            <div v-else></div>
                    <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="uploadUserinfo">确 定</el-button>
              </span>
             </el-dialog>
             
             <!--修改个人密码的弹框-->
             <el-dialog
              title="提示"
              :visible.sync="dialogVisible"
              width="50%"
              :before-close="handleClose">
            <el-steps :active="step.currentStep" style="margin-left: 40px">
              <el-step title="步骤 1" :description="step.step1"></el-step>
              <el-step title="步骤 2" :description="step.step2"></el-step>
              <el-step title="步骤 3" :description="step.step3"></el-step>
            </el-steps><br/>
            <!--步骤一-->
              <span slot="footer" class="dialog-footer" v-if="step.currentStep==1">
             <el-input v-model="stepInput.email" placeholder="请输入你的邮箱"></el-input>
                <el-button style="margin-top: 10px" type="primary" @click="oneStep">下一步</el-button>
              </span>
              <!--步骤二-->
              <span slot="footer" class="dialog-footer" v-if="step.currentStep==2">
              <el-input v-model="stepInput.email"  placeholder="请输入你的邮箱"></el-input>
              <el-input v-model="stepInput.vcode" style="width: 770px;margin-top: 10px;margin-left: -100px"   placeholder="请输入验证码"></el-input>
              <el-button @click="sendVcode" v-if="stepInput.flag">发送验证码</el-button>
              <el-button disabled v-if="stepInput.flag==false">{{stepInput.message}}</el-button><br>
               <el-button type="primary" @click="twoStep" style="margin-top: 10px">下一步</el-button>
              </span>
              <!--步骤三-->
                 <span slot="footer" class="dialog-footer" v-if="step.currentStep==3">
                 <el-input placeholder="请输入密码" style="margin-top: 10px" v-model="stepInput.pwd" show-password></el-input>
                 <el-input placeholder="请再次输入密码" style="margin-top: 10px" v-model="stepInput.rePwd" show-password></el-input>
                 <el-button type="primary"  style="margin-top: 10px" @click="handleClose">取消</el-button>
                 <el-button type="primary"  style="margin-top: 10px" @click="updataPwd">确认</el-button>
              </span>
            </el-dialog>
      
<!--      忘记密码-->
        <el-dialog
            title="提示"
            :visible.sync="fingerPwdDialogVisible"
            width="30%"
            center>
          旧密码：<el-input placeholder="请输入密码" v-model="old.oldPwd"  show-password style="margin-bottom: 20px"></el-input>
          新密码：<el-input placeholder="请输入密码" v-model="old.newPwd"   show-password style="margin-bottom: 20px"></el-input>
          请再次输入新密码：<el-input placeholder="请输入密码"  v-model="old.reNewPwd"  show-password></el-input>
          <span slot="footer" class="dialog-footer">
    <el-button @click="fingerPwdDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="forgienPwd">确 定</el-button>
  </span>
        </el-dialog>
            
            
        </div>
   
    `,data(){
        return{
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            time:{currentTime:'',year:'',month:'',day:''},
            Article:{title:''},
            userinfo:{},
            centerDialogVisible:false,
            dialogVisible: false,
            error:{uname:'',pwd:'',repassword:'',email:'',phone:''},
            fileList: {name:'',url:'',},
            tempUserinfo:'',
            step:{step1:"请输入你的邮箱",setp2:"",step3:'',currentStep:1},
            stepInput:{email:'',vcode:'',flag:true,message:'',getCode:'',pwd:'',rePwd:''},
            fingerPwdDialogVisible:false,
            old:{oldPwd:'',newPwd:'',reNewPwd:''},
        }
    },
    methods:{

        //忘记密码
        forgienPwd(){
            axios.post(`user/userinfo/updataPwdByPwd?oldPwd=${this.old.oldPwd}&newPwd=${this.old.newPwd}&reNewPwd=${this.old.reNewPwd}`,this.userinfo).then(res=>{
                if(res.data.code==-1){
                    this.$message.error(res.data.message);
                }else{
                    this.$message.success(res.data.message);
                    this.old={oldPwd:'',newPwd:'',reNewPwd:''};
                    this.fingerPwdDialogVisible=false;
                }
            })
        },
        //修改密码的按钮
        updataPwd(){
           // this.userinfo.pwd=this.stepInput.pwd;
            axios.get(`user/userinfo/updataPwd?pwd=${this.stepInput.pwd}&rePwd=${this.stepInput.rePwd}&email=${this.stepInput.email}`).then(res=>{
               if(res.data.code==1){
                   this.$message.success(res.data.message);
                   this.dialogVisible=false;
                   this.step={step1:"请输入你的邮箱",setp2:"",step3:'',currentStep:1},
                   this.stepInput={email:'',vcode:'',flag:true,message:'',getCode:'',pwd:'',rePwd:''}
               }else{
                   this.$message.error(res.data.message);
               }
            })
        },
        //第一步骤的按钮
        oneStep(){
            if(this.stepInput.email==''||this.stepInput.email==null){
                this.$message.error("请输入你的邮箱");
            }else{
                this.step.step1='已完成';
                this.step.step2='请发送验证码';
               /* if(this.stepInput.email!=this.userinfo.email){
                    alert("你输入的邮箱错误，请重新输入")
                }else{
                    this.step.currentStep=2;
                }
*/
                axios.get(`user/userinfo/getUserByEmail?email=${this.stepInput.email}`).then(res=>{
                  if(res.data.code==1){
                      this.step.currentStep=2;
                  }else{
                      this.$message.error(res.data.message);
                      this.stepInput.email="";
                  }
                })

            }
        },
        //第二步骤的按钮
        twoStep(){
            if(this.stepInput.vcode==null||this.stepInput.vcode==''){
                alert("验证码不能为空");
            }else{
                if(this.stepInput.vcode==this.stepInput.getCode){
                    this.step.step2='已完成';
                    this.step.step3='请输入新的密码';
                    this.step.currentStep=3;
                }else{
                    this.$message.error("验证码输入错误");
                }
            }
        },
        //发送验证码
        sendVcode(){
            this.stepInput.flag=false;
            this.stepInput.message=60+"秒后重试"
            let count = 60;
            const intervalID = setInterval(() => {
                count--;
                this.stepInput.message=count+"秒后重试"
                if (count <= 0) {
                    clearInterval(intervalID);
                    this.stepInput.flag=true;
                }
            }, 1000); // 1 second interval

            axios.get("other/email/sendEmail?emailReceiver=3498922531@qq.com").then(res=>{
                console.log(res.data.message)
               if(res.data.code==1){
                   this.stepInput.getCode=Number(res.data.message);
                }
            })
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.step={step1:"请输入你的邮箱",setp2:"",step3:'',currentStep:1},
                    this.stepInput={email:'',vcode:'',flag:true,message:'',getCode:'',pwd:'',rePwd:''}
                    done();
                })
                .catch(_ => {});
    },
        aaa(){
            this.centerDialogVisible=true;
            this.fileList.url=this.userinfo.photo;
            this.tempUserinfo = _.cloneDeep(this.userinfo);
            console.log(this.tempUserinfo);
        },
        //取消修改个人信息
        cancel(){
            this.centerDialogVisible = false;
            this.userinfo=this.tempUserinfo;
            console.log(this.tempUserinfo);
            console.log(this.userinfo)
        },
        //修改信息
        uploadUserinfo(){
            this.userinfo.photo=this.fileList.url;
            axios.post("blog-user/userinfo/uploadUser",this.userinfo).then(res=>{
                this.error={uname:'',pwd:'',repassword:'',email:'',phone:''};
                if(res.data.code==1){
                    sessionStorage.setItem("jwt",res.headers.authorization)
                    this.$message(res.data.message);
                    this.myinfo();
                    this.centerDialogVisible=false;
                }else if(res.data.code==-1){
                    for (let dataKey in res.data.data) {
                        if(this.error[res.data.data[dataKey].field]==false) {
                            this.error[res.data.data[dataKey].field] = res.data.data[dataKey].defaultMessage + "<br>";
                        }
                    }
                }
            })
        },
         handleSuccess(response){
               this.fileList.url=response.data;
           },
           handleError(){

           },
        //获取当前时间
        updateCurrentTime() {
            const now = new Date();
            this.time.year= now.getFullYear();
            this.time.month= now.getMonth()+1;
            this.time.day= now.getDay()+6;
            this.time.currentTime = now.toLocaleTimeString();
        },
        myinfo(){
            var jwt=sessionStorage.getItem("jwt");
            axios.get("blog-user/userinfo/myinfo",{
                headers:{
                    Authorization: jwt,
                }
            }).then(res=>{
              if(res.data.code==-1){
                  this.userinfo=null;

              }else{
                  this.userinfo=res.data.data;
                 this.$emit('uo',this.userinfo);
              }
            })
        },
        logout(){
           sessionStorage.removeItem("jwt");
           this.userinfo=null;
        },
        search(){
            this.$emit('ar',this.Article);
        }
    },
    created(){
      this.myinfo();
    },
    mounted() {
        this.updateCurrentTime();
        setInterval(this.updateCurrentTime, 1000); // 每秒更新一次时间
    },
})